<template>
  <div>
    <div class="page-title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: './index' }"
          >检查表列表</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{
          checkListItem.checkListName
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="page-content">
      <el-button
        type="text"
        icon="el-icon-circle-plus"
        @click="handleAddNode('')"
        >新增父类检查项</el-button
      >
      <el-tree
        :data="treeList"
        node-key="checkListItemID"
        :props="defaultProps"
        :accordion="true"
        :expand-on-click-node="false"
        :default-expanded-keys="expandedNode"
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <el-button
              class="button01"
              type="text"
              size="mini"
              @click="edit(data)"
            >
              <i>编辑</i>
            </el-button>
          </span>
          <span>
            <el-switch
              class="switch"
              v-model="data.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="停用"
              active-value="启用"
              inactive-value="停用"
              @change="switch_change(data)"
            >
            </el-switch>
          </span>
          <!-- 添加按钮 -->
          <!-- <span>
            <el-button type="text" size="mini" @click="() => append(data.checkListItemCode)">
            <i class="el-icon-circle-plus"></i>
          </el-button>
          </span> -->

          <span>{{ node.label }}</span>

          <el-button
            v-if="node.data.checkListItemCode.length == 2"
            icon="el-icon-circle-plus"
            type="text"
            style="float: right"
            @click="handleAddNode(node)"
          ></el-button>
        </span>
      </el-tree>
    </div>

    <!-- 弹框区域 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="35%"
      style="width: 2000px; height: 800px; left: -20%; top: 0%"
    >
      <span>
        <!-- 表单区域 -->
        <div style="height: 320px; width: 100%; overflow: auto">
          <el-form
            :model="checkItem01"
            label-width="100px"
            label-position="right"
            style="width: 100%"
          >
            <el-row>
              <el-col>
                <el-form-item label="检查项:" style="width: 100%">
                  <el-input v-model="checkItem01.checkListItemName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="描述:" style="width: 100%">
                  <el-input v-model="checkItem01.description"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="依据:">
                  <el-input v-model="checkItem01.gist"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="原因:">
                  <el-input v-model="checkItem01.cause"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="体系要素:">
                  <el-input v-model="checkItem01.hseFactor"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="问题类型:">
                  <el-input v-model="checkItem01.hazardFactorType"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="问题级别:">
                  <el-input v-model="checkItem01.problemRank"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="安全绩效扣分:">
                  <el-input v-model="checkItem01.score"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="状态:">
                  <el-select
                    v-model="checkItem01.status"
                    placeholder="请选择状态"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增节点 -->
    <el-dialog
      title="新增检查项"
      :visible.sync="addNodeDialogVisible"
      width="50%"
    >
      <el-form :model="addNodeForm" label-width="100px" labelPosition="left">
        <el-row>
          <el-col :span="24">
            <el-form-item label="检查项:">
              <el-input
                v-model="addNodeForm.checkListItemName"
                placeholder="请输入新增检查项名"
                style="width: 92%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="描述:">
              <el-input
                v-model="addNodeForm.description"
                style="width: 92%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="依据:">
              <el-input
                v-model="addNodeForm.gist"
                placeholder="请输入依据"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="原因:">
              <el-select
                v-model="addNodeForm.cause"
                placeholder="请选择原因"
                style="width: 80%"
              >
                <el-option
                  v-for="item in causeOptions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="体系要素:">
              <el-select
                v-model="addNodeForm.hseFactor"
                placeholder="请选择体系要素"
                style="width: 80%"
              >
                <el-option
                  v-for="item in hseFactorOptions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="问题类型:">
              <el-select
                v-model="addNodeForm.hazardFactorType"
                placeholder="请选择问题类型"
                style="width: 80%"
              >
                <el-option
                  v-for="item in hazardFactorTypes"
                  :key="item.hazardFactor"
                  :label="item.hazardFactor"
                  :value="item.lastLevelCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="问题级别:">
              <el-select
                v-model="addNodeForm.problemRank"
                placeholder="请选择级别"
                style="width: 80%"
              >
                <el-option
                  v-for="item in ranks"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="安全绩效扣分:">
              <el-input
                type="number"
                v-model="addNodeForm.score"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="状态:">
              <el-select
                v-model="addNodeForm.status"
                placeholder="请选择状态"
                style="width: 80%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <span slot="footer">
        <el-button @click="addNodeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewNode()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetTreetList } from "../../../services/getTrees";
import {
  UpdateItems,
  UpdateFlag,
  AddCheckItemsNode,
} from "../../../services/updateCheckItems";
import {
  GetDictionary,
  GetProblemType,
} from "../../../services/cq_gettreedata";

export default {
  data() {
    return {
      // switch_status: "启用",
      stopOrStart: {
        tag: "",
        id: "",
      },
      options: [
        {
          value: 1,
          label: "启用",
        },
        {
          value: 0,
          label: "停用",
        },
      ],
      checkItem01: {
        cause: "",
        checkItemNumber: "",
        checkListID: "",
        checkListItemCode: "",
        checkListItemID: 0,
        checkListItemName: "",
        children: [],
        description: "",
        gist: "",
        hazardFactorType: "",
        hseFactor: "",
        insertDateCode: "",
        problemRank: "",
        score: "",
        status: "",
      },
      checkItem: {
        checkListID: "",
        checkListItemCode: "",
        checkListItemID: "",
        status: "",
      },
      dialogVisible: false,
      checkListItem: {},
      // 存储树节点
      treeList: [],
      defaultProps: {
        children: "children",
        label: "checkListItemName",
      },
      expandedNode: [],
      addNodeDialogVisible: false,
      addNodeForm: {},
      hazardFactorTypes: [],
      causeOptions: [],
      hseFactorOptions: [],
      ranks: [],
      node: {},
    };
  },
  mounted() {
    this.getCheckListItem();
    this.getTreeItem();
  },
  methods: {
    // 滑块变化
    switch_change(data) {
      this.$confirm("是否" + data.status + "该检查项?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.checkItem.checkListID = data.checkListID;
          this.checkItem.checkListItemCode = data.checkListItemCode;
          this.checkItem.checkListItemID = data.checkListItemID;
          this.checkItem.status = data.status;
          UpdateFlag(this.checkItem).then((res) => {
            if (res.code == 1000) {
              this.expandedNode.push(data.checkListItemID);
              this.getTreeItem();
            }
          });
          this.$message.success("更新状态成功！");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作",
          });
          this.getTreeItem();
        });
    },
    getCheckListItem() {
      this.checkListItem = JSON.parse(this.$route.query.row);
      // console.log("checkListItem:",this.checkListItem);
    },
    getDictionaryData() {
      GetProblemType()
        .then((res) => {
          this.hazardFactorTypes = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });

      GetDictionary({ name: "问题原因" })
        .then((res) => {
          this.causeOptions = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });

      GetDictionary({ name: "隐患等级" })
        .then((res) => {
          this.ranks = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });

      GetDictionary({ name: "体系要素" })
        .then((res) => {
          this.hseFactorOptions = res.data;
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },

    // 获取树节点
    getTreeItem() {
      GetTreetList(this.checkListItem.checkListID).then((res) => {
        this.treeList = res.data;
        console.log("gettree:",this.treeList);
      });
    },
    // 点击编辑按钮
    edit(data) {
      console.log(1111, data);

      this.checkItem01.checkListItemName = data.checkListItemName;
      this.checkItem01.description = data.description;
      this.checkItem01.gist = data.gist;
      this.checkItem01.cause = data.cause;
      this.checkItem01.hseFactor = data.hseFactor;
      this.checkItem01.hazardFactorType = data.hazardFactorType;
      this.checkItem01.problemRank = data.problemRank;
      this.checkItem01.score = data.score;
      this.checkItem01.status = data.status;
      this.checkItem01.checkListItemID = data.checkListItemID;
      this.checkItem01.checkListItemCode = data.checkListItemCode;
      this.checkItem01.checkItemNumber = data.checkItemNumber;
      this.checkItem01.checkListID = data.checkListID;
      this.dialogVisible = true;

    },

    //状态发生变化
    // change() {
    //   console.log("status",this.checkItem.status);

    //   UpdateFlag(this.stopOrStart).then((res) => {
    //     console.log(147,res);
    //   })
    // },

    // 确定
    submit() {
      this.expandedNode = [];
      // console.log(33333,this.checkItem01);
      UpdateItems(this.checkItem01).then((res) => {
        console.log(33333,this.checkItem01);
        if (res.code == 1000) {
          // this.$router.go(0);
          this.dialogVisible = false;
        } else {
          this.$message.console.error;
          ("修改失败！");
        }
      });

      this.$message({
        message: "修改成功！",
        type: "success",
      });
      this.getTreeItem();
      this.expandedNode.push(this.checkItem01.checkListItemID);
    },

    //新增节点
    handleAddNode(nodeData) {
      this.expandedNode = []
      this.getDictionaryData();
      this.addNodeDialogVisible = true;
      if (nodeData == "") {
        this.addNodeForm.checkListID = this.checkListItem.checkListID;
        this.addNodeForm.checkListItemCode = ""
      } else {
        this.node = nodeData.data;
        this.addNodeForm.checkListID = nodeData.data.checkListID;
        this.addNodeForm.checkListItemCode = nodeData.data.checkListItemCode;
      }
      console.log(this.addNodeForm);
    },
    submitNewNode() {
      console.log(444,this.addNodeForm);
      AddCheckItemsNode(this.addNodeForm)
        .then(() => {
          this.$message.success("操作成功！");
          this.getTreeItem();
        })
        .catch((err) => {
          this.$message.error(err);
        });
      this.expandedNode.push(this.node.checkListItemID);
      this.addNodeForm = {};
      this.addNodeDialogVisible = false;
    },
  },
};
</script>

<style scoped>
.custom-tree-node {
  width: 100%;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.button01 {
  margin-right: 20px;
}

.switch {
  margin-right: 50px;
}
</style>